<template>
  <view class="tab-component">
    <view class="left-tab-box">
      <view class="left-all">
        <text class="all-text">创作中心</text>
        <text class="iconfont icon-weibiaoti--10"></text>
      </view>
      <view
        class="right-tab-item"
        v-for="(item, index) in menuList"
        :key="index"
      >
        <text class="t-icon" :class="item.icon"></text>
        <text class="title">{{ item.title }}</text>
        <text class="num-red" v-if="item.num != ''">{{ item.num }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup() {
    const data = reactive({
      menuList: [
        { icon: "t-icon-paizhao", title: "拍照", num: "" },
        { icon: "t-icon-a-wo", title: "@我", num: 1 },
        { icon: "t-icon-cuxiao", title: "促销", num: "" },
        { icon: "t-icon-jifen", title: "积分", num: "" },
      ],
    });
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.tab-component {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
  padding-top: 20rpx;
  background: #fff;
  .left-tab-box {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    .right-tab-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      .num-red {
        position: absolute;
        right: 28rpx;
        top: -5rpx;
        width: 24rpx;
        height: 24rpx;
        line-height: 24rpx;
        font-size: 20rpx;
        text-align: center;
        background-color: #ff0f23;
        border-radius: 50%;
        color: #fff;
      }
      .t-icon {
        width: 50rpx;
        height: 50rpx;
      }
      .title {
        margin-top: 10rpx;
        font-size: 22upx;
        font-weight: 300;
      }
    }
  }
  .left-all {
    display: flex;
    // 竖向
    flex-direction: row;
    // justify-content: center;
    border-left: 1rpx solid #eee;
    padding: 0 15rpx;
    align-items: center;
    .all-text {
      font-size: 26rpx;
      font-weight: 600;
      width: 70rpx;
      line-height: 30rpx;
      text-align: center;
    }
    .icon-weibiaoti--10 {
      transform: rotate(180deg);
    }
  }
}
</style>
